import React, {useRef} from 'react';
import {View, Text, TouchableOpacity, StyleSheet, Modal, Image, Platform} from 'react-native';
import { WebView } from "react-native-webview";
import {getWebUrl} from "../../../utils/ComFunction";
import LinearGradient from "react-native-linear-gradient";
import {ToastToUser} from "../../../utils/CustomToast";
const fullAgreementDialog = ({ visible, title, uri, isAgree, confrimText, cancelText, onAgree, onConfrim, onCancel }) => {

  const isIos = Platform.OS == 'ios';

  const webViewRef = useRef(null);
  // 如果需要注入JavaScript代码
  const runFirst = `  var style = document.createElement('style');
  style.innerHTML = '* { font-size: 1.6rem !important; } h1 span,h2,h3,h4,h5,h6 { font-size: 1.3em !important; }';
  document.head.appendChild(style);
  true;`;
  const onShouldStartLoadWithRequest = (request) => {
    // 处理加载请求的逻辑
    return true;
  };

  return (
      <Modal
          visible={visible}
          transparent={true}
          animationType="fade"
      >
        <View style={styles.container}>
          <View style={styles.dialog}>
            <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
              <Image style={{width: 40, height: 40}} source={require('source/image/Frame.png')}></Image>
              {/*<Text style={styles.title}>{title}</Text>*/}
            </View>

            <View style={{ marginTop: 10, marginBottom: 10 }}>
              <Text style={{ fontSize: 15, color: '#333', lineHeight: 21}}>全款预付将不享受平台交易担保服务，且不支持售后，您将需要自行承担交易失败风险，请阅读风险提示后谨慎选择。</Text>
            </View>

            <View style={styles.webviewContainer}>
              <WebView
                  style={styles.webview}
                  ref={webViewRef}
                  source={{ uri: uri }}
                  injectedJavaScript={runFirst}
                  javaScriptEnabled={true}
                  domStorageEnabled={true}
                  cacheEnabled={false}
                  onMessage={(event) => {
                    // 处理WebView发送的消息
                  }}
                  androidAllowFileAccess={true}
                  androidAllowContentAccess={true}
                  onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
                  scalesPageToFit={true} // iOS
                  zoom={true} // Android
              />
            </View>


            <View style={styles.agreeBg}>
              <TouchableOpacity
                  style={styles.checkBox}
                  activeOpacity={0.8}
                  onPress={onAgree}
              >
                {
                  isIos ?
                      <Image
                          style={styles.checkIcon}
                          source={{ uri: isAgree ? 'agent_check' : 'agent_uncheck' }}
                      /> :
                      <Image
                          style={styles.checkIcon}
                          source={{ uri: isAgree ? 'icon_selector_checked_2' : 'icon_selector_unchecked_2' }}
                      />
                }

                <Text style={styles.agreeText}>本人已阅读风险提示，愿意承担交易风险 </Text>
              </TouchableOpacity>
            </View>


            <View style={styles.bottomBox}>

              <TouchableOpacity
                  activeOpacity={0.8}
                  style={styles.bottomRightItemBox}
                  onPress={onCancel}
              >
                <LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}
                                colors={['#F5F5F5', '#F5F5F5']}
                                style={styles.itemInnerBox}>
                  <Text style={styles.bottomRightItemText}>{cancelText}</Text>

                </LinearGradient>
              </TouchableOpacity>
              <TouchableOpacity
                  activeOpacity={0.8}
                  style={styles.bottomRightItemBox}
                  onPress={onConfrim}
              >
                <LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}
                                colors={['#FFEF3A', '#FFDB1B']}
                                style={styles.itemInnerBox}>
                  <Text style={styles.bottomRightItemText}>{confrimText}</Text>

                </LinearGradient>
              </TouchableOpacity>
            </View>

          </View>
        </View>
      </Modal>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  dialog: {
    width: '85%',
    height: '80%',
    backgroundColor: 'white',
    borderRadius: 5,
    padding: 26,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#000000',
  },
  description: {
    marginTop: 10,
    fontSize: 14,
    color: '#666666',
  },

  webviewContainer: {
    flex: 1, // 占据剩余空间
    borderWidth: 1, // 可选：添加边框以便查看容器边界
    borderColor: '#eee',
    borderRadius: 5,
  },
  webview: {
    flex: 1,
  },

  // 协议单选按钮样式
  agreeBg: {
    marginTop: 10,
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  checkBox: {
    height: 30,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  checkIcon: {
    marginRight: 8,
    width: 15,
    height: 15,
  },
  agreeText: {
    color: '#333333',
    fontSize: 12
  },

  // 底部按钮样式
  bottomBox: {
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: '#fff',
    // paddingHorizontal: 16,
  },
  bottomRightItemBox: {
    width: 110,
    height: 28,
    marginTop: 10,
    // marginBottom: 10,
  },
  itemInnerBox: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 18,
  },
  bottomRightItemText: {
    color: '#222',
    fontSize: 14,
  },

});

export default fullAgreementDialog;